<template>
  <div class="user-message">
    <div class="user-image">
      <img src="@assets/cc.png" alt="">
    </div>
    <div class="user-nickname single-line-omission">{{ message.publisher }}</div>
    <div class="user-button">
      <!-- <div class="problem-count">1</div> -->
      <!-- <button class="problem-btn" @click="handleAnswer">答题</button> -->
    </div>
    <Loading :loading="loading"></Loading>
    <UserToast :loading="showTosat" :icon="toastIcon" :text="toastText" :delay="1000" @close="closeToast"></UserToast>
  </div>
</template>

<script>
import { toRefs, ref } from 'vue';
import { getVideoMessage, updateVideoHistory, videoEndend } from '@/api/videoPlay.js';
import { useAnswerList, useCurrentVideo } from '@/store/answer.js';
import { useRoute, useRouter } from 'vue-router';

export default {
  props: {
    message: { type: Object, default: () => ({}) },
    videoEnded: { type: Boolean, default: false },
  },
  setup(props) {
    const loading = ref(false);
    const showTosat = ref(false);
    const route = useRoute();
    const router = useRouter();
    //  操作 answerList， 避免因为解构失去响应式
    const answerListStore = useAnswerList();
    const { currentVideo, setCurrentVideo, setCurrentVideoId } = useCurrentVideo();

    const toastIcon = ref('');
    const toastText = ref('');
    //  点击答题
    const handleAnswer = async () => {
      const parentId = JSON.parse(localStorage.getItem('parentId'));
      const { videoId, score } = props.message;

      //  判断用户是否播放完视频了
      const { code, msg } = await videoEndend({
        parentId,
        changeId: videoId,
        changeScore: score,
        changeType: "01"
      })

      //  判断视频是否播放完成 - 主要针对第一次, 避免因为直接点击答题按钮
      if(msg === '创建成功') {
        
      } else if( msg === '这个视频已获取过积分了' ) {
        toastIcon.value = 'icon-71shibai';
        toastText.value = '该视频已获取过积分了';
        showTosat.value = true;
        return
      } else { // 说明视频已经播放完成了
        toastIcon.value = 'icon-71shibai';
        toastText.value = '视频未播放完';
        showTosat.value = true;
        return;
      } 

      loading.value = true;
      //  获取列表
      await answerListStore.setAnswerList(videoId);
      loading.value = false;
      //  判断 有没有题目，没有题目就不进行跳转, 提示暂无题目
      if (answerListStore.answerList.length === 0) {
        toastIcon.value = 'icon-wushuju';
        toastText.value = '暂无题目';
        showTosat.value = true;
        return;
      }

      // 设置跳转路径
      setCurrentVideo({ path: `/VideoPlay/${videoId}` });
      //  设置 videoId
      setCurrentVideoId(videoId);
      //  跳转页面获取第一题
      router.push({ path: '/AnswerPage', query: { order: 0 } });
    }

    //  监听 是否播放完成，如果为 false 就说明没有播放完成


    //  关闭弹窗
    const closeToast = () => {
      showTosat.value = false;
    }

    return {
      loading,
      showTosat,
      toastIcon,
      toastText,
      handleAnswer,
      closeToast
    }
  }
}
</script>

<style lang="scss" scoped>
.user-message {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  width: 100vw;
  height: 6rem;
  box-sizing: border-box;

  .user-image {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .user-nickname {
    flex: 1;
    padding: 0 1rem;
    font-size: 1.2rem;
  }

  .user-button {
    position: relative;

    .problem-count {
      position: absolute;
      right: .6rem;
      top: -.6rem;
      background: yellow;
      box-shadow: 0 0 .8rem black;
      padding: 0 .4rem;
      font-size: .9rem;
      font-weight: 600;
    }

    .problem-btn {
      width: 5rem;
      height: 2.5rem;
      border-radius: .4rem;
      background: rgba(22, 155, 213, 1);
      color: #fff;
    }
  }
}
</style>